<script setup>
	import { ref, reactive } from "vue"
	import { getStatusBarHeight, getMenuButtonHeight } from "@/utils/system.js"
	import { getChatHistoryAPI, updateUserAPI } from "@/api/index.js"
	import { useUserStore } from "@/stores/user.js"
	import { useCommonStore } from "@/stores/index.js"
	import { chatbotMessageStore } from "@/stores/chatbotMessage.js"
	import { uploadUrl } from "@/common/config.js"
	const userStore = useUserStore()
	const commonStore = useCommonStore()
	const chatbotMessage = chatbotMessageStore()

	// 开启新会话
	const openChat = () => {
		userStore.setSessionId('') //开启新会话
		chatbotMessage.removeMessage() //清空暂存的对话数据
		commonStore.setSelectIndex(1) //指向对话界面
	}
	// 点击聊天列表获取对应的聊天内容
	const selectChatHistory = async (sessionId) => {
		userStore.setSessionId(sessionId)
		commonStore.setSelectIndex(1) //指向对话界面
		uni.showLoading({ mask: true, title: '请求中' })
		try {
			const { data } = await getChatHistoryAPI({ sessionId })
			chatbotMessage.setMessage(data)
		} finally {
			uni.hideLoading()
		}
	}

	// 修改用户信息
	const userInfo = reactive({
		avatar: userStore.userInfo.avatar,
		nickname: '',
	})
	const popupRef = ref(null)
	const onUpdateInfo = () => {
		popupRef.value.open()
	}
	// 提交
	const onSubmit = async (event) => {
		userInfo.nickname = event.detail.value.nickname
		if (userInfo.avatar === '' || userInfo.nickname.trim() === '') {
			return uni.showToast({ icon: 'none', title: '请填写头像和昵称' })
		}
		try {
			uni.showLoading({ mask: true })
			// 判断头像是否修改了
			if (userInfo.avatar !== userStore.userInfo.avatar) {
				// 上传头像
				const uploadAvatar = await uni.uploadFile({
					url: uploadUrl,
					filePath: userInfo.avatar,
					name: 'file'
				})
				userInfo.avatar = JSON.parse(uploadAvatar.data).data
			}
			// 修改用户信息
			await updateUserAPI(userInfo)
			userStore.setUserInfo(userInfo)
			uni.showToast({ icon: "success", title: "保存成功" })
			onClosePopup()
		} finally {
			uni.hideLoading()
		}
	}


	// 关闭弹窗
	const onClosePopup = () => {
		popupRef.value.close()
	}
	// 选择用户头像
	const onChooseavatar = (event) => {
		userInfo.avatar = event.detail.avatarUrl
	}

	// 退出登录
	const logout = () => {
		userStore.logout()
	}

	// 去积分页
	const goPoints = () => {
		uni.navigateTo({ url: "/pages/pay/pay" })
	}
</script>

<template>
	<!-- 遮罩层 -->
	<view class="modal-backdrop" :style="{'top':getStatusBarHeight()+getMenuButtonHeight()+'px'}"></view>
	<view class="personal-center" :style="{'top':getStatusBarHeight()+getMenuButtonHeight()+'px'}">
		<!-- 用户信息 -->
		<view class="user-info" @click="onUpdateInfo">
			<image :src="userStore.userInfo.avatar||'/static/images/touxiang.png'" mode="aspectFill"></image>
			<text>{{userStore.userInfo.nickname}}</text>
		</view>
		<text class="new-dialogue" @click="openChat">开启新对话</text>
		<text class="history" @click="logout">退出登录</text>
		<text class="history" @click="goPoints">用户积分</text>
		<text class="history" v-if="userStore.chatList.length > 0">对话历史</text>
		<!-- 消息列表 -->
		<scroll-view v-if="userStore.chatList.length > 0" scroll-y type="list" class="scroll-height" enhanced
			enable-passive>
			<view class="history-list" v-for="(item,index) in userStore.chatList" :key="index"
				@click="selectChatHistory(item.session_id)">
				<template v-for="(itema,indexa) in item.message" :key="indexa">
					<text>{{itema.content}}</text>
				</template>
				<text>{{item.time}}</text>
			</view>
		</scroll-view>
		<view class="safe-area-inset-bottom"></view>
		<!-- 修改用户信息 -->
		<uni-popup ref="popupRef" type="bottom" background-color="#fff" border-radius="20rpx 20rpx 0 0">
			<view class="popup-top"><uni-icons type="closeempty" size="20" @click="onClosePopup"></uni-icons></view>
			<view class="popup-content">
				<view class="title">获取您的昵称、头像</view>
				<view class="desc">获取用户头像、昵称，主要向用户提供具有辨识度的用户中心界面</view>
				<view class="user-avatar">
					<button open-type="chooseAvatar" class="avatar-button" @chooseavatar="onChooseavatar">
						<image class="avatar" :src="userInfo.avatar||userStore.userInfo.avatar||'/static/images/touxiang.png'">
						</image>
					</button>
				</view>
				<form @submit="onSubmit">
					<input class="user-nickname" :value="userStore.userInfo.nickname" type="nickname" name="nickname"
						placeholder="请输入昵称" />
					<button class="submit-button" form-type="submit" type="primary">保 存</button>
				</form>
			</view>
		</uni-popup>
	</view>
</template>

<style lang="scss" scoped>
	// 遮罩层
	.modal-backdrop {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.8);
	}

	.personal-center {
		background-color: #F8F8F8;
		position: fixed;
		left: -80%;
		bottom: 0;
		width: 80%;
		animation: slideInFromLeft 0.5s forwards;

		.user-info {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 30rpx 0;

			image {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}

			text {
				font-size: 35rpx;
				font-weight: bold;
				padding-top: 10rpx;
			}
		}

		// 开启新对话
		.new-dialogue {
			padding: 25rpx 0;
			margin: 0 20rpx;
			border-bottom: 1rpx solid rgba(218, 218, 218, 0.6);
		}

		// 对话历史
		.history {
			padding: 25rpx 0;
			margin: 0 20rpx;
			border-bottom: 1rpx solid rgba(218, 218, 218, 0.6);
		}

		// 消息列表
		.scroll-height {
			height: 800rpx;

			.history-list {
				background-color: #ffffff;
				border-radius: 20rpx;
				margin: 20rpx;
				padding: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.history-list text:nth-child(1) {
				flex: 1;
				@include ellipsis(1);
			}

			.history-list text:nth-child(2) {
				color: #9D9EAB;
				font-size: 26rpx;
				padding-left: 20rpx;
			}
		}
	}

	.popup-top {
		padding: 20rpx;
		display: flex;
		justify-content: flex-end;
	}

	.popup-content {
		padding: 0 20rpx;

		.title {
			font-size: 30rpx;
			color: $text-color-1;
		}

		.desc {
			margin-top: 20rpx;
			font-size: 22rpx;
			color: $text-color-2;
			letter-spacing: 1px;
		}

		.user-avatar {
			margin-top: 40rpx;
			display: flex;
			justify-content: center;

			.avatar-button {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				padding: 0;
				overflow: hidden;

				.avatar {
					width: 100%;
					height: 100%;
				}
			}
		}

		.user-nickname {
			margin: 30rpx 0 40rpx 0;
			padding: 20rpx;
			border-bottom: 1rpx solid #f2f2f2;
			background-color: #F7F7F7;
		}

		.submit-button {
			margin-bottom: 30rpx;
		}
	}

	@keyframes slideInFromLeft {
		from {
			left: -80%;
		}

		to {
			left: 0
		}
	}
</style>